<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录ing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/communtiy.css">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="js/login.js"></script>
</head>
<body>
    <div class="juzhong">
        <form action="/login" method="post" style="background: black; padding: 25px 15px;opacity: 0.9;border-radius: 20px">
            <input type="hidden" id="ip" name="ip" >
            <div class="input-group">
                <span class="input-group-addon" >用户名</span>
                <input id="name" name="name" type="text" class="form-control"  placeholder="请输入用户名" aria-describedby="basic-addon1">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon" >密码</span>
                <input id="pwd" name="password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon" >验证码</span>
                <input id="verifycode" name="verifycode" type="text" class="form-control" placeholder="请输入下方验证码" aria-describedby="basic-addon1">
            </div>
            <br>
            <canvas id="canvas" width="140" height="35"></canvas>
            <br>
            <div th:if="${session.wrong == 'wrong'}" class="alert alert-warning">
                <a href="#" class="close" data-dismiss="alert">
                    &times;
                </a>
                <strong>警告！</strong>账号或密码输入错误。
            </div>
<!--            <div th:if="${session.success != null}" class="alert alert-warning">-->
<!--                <a href="#" class="close" data-dismiss="alert">-->
<!--                    &times;-->
<!--                </a>-->
<!--                <strong>成功！</strong>您已成功注册用户名为<strong th:text="${session.success}"></strong>的账号-->
<!--            </div>-->
            <br>
            <button type="submit" class="btn btn-default" onclick="return validate()">登录</button>&nbsp;&nbsp;
            <a href="/register" style="color: #ff6666">注册</a>
            <br>
        </form>
        <br>
        <a data-toggle="modal" data-target="#myModal1" style="cursor: pointer; color: #333333">用户登录须知</a>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel" style="cursor: pointer; color: #d5d5d5">
                            用户登录须知
                        </h4>
                    </div>
                    <div class="modal-body">
                        玩家输入账号、密码、验证码后可直接加入游戏房间；<br>
                        第一个加入房间的玩家为庄家，其他进入房间的玩家为闲家，加入房间时，每个玩家的状态默认为等待中。<br>
                        房间默认是准备中状态。<br>
                        只有庄家的界面中存在开始游戏按钮，点击开始游戏后，房间变为发牌中状态，每个在房间中的玩家状态变更为游戏中。庄家可以给每位玩家发牌，当所有玩家都不再要牌后，庄家需要点击开牌进入开牌阶段。<br>
                        若游戏中途有玩家加入，则中途加入的玩家也为等待中状态。<br>
                        若游戏中闲家退出，则游戏继续，若庄家退出，则房间恢复为准备状态，清空所有玩家手牌，在闲家中随机选出一个玩家作为庄家。<br>
                        多处登录同一账号时，账号数据互通。<br>
                        准备中 --> 发牌中 --> 等待开牌 --> 开牌中 --> 结算中<br>
                        房间人数 >= 2 时，庄家可以开始游戏<br>
                        发牌阶段，每个闲家轮流要牌，点击停止要牌或亮牌后，下个闲家才能要牌，房间信息会显示当前要牌人，只能庄家给要牌的玩家发牌。所有闲家都停止要牌后，进入等待开牌阶段。<br>
                        进入等待开牌阶段后，庄家需要点击进入开牌阶段，开始开牌。<br>
                        开牌阶段，庄家可以给自己加牌，也可以开任何一个闲家的牌。开牌如果闲家爆点，则闲家输，庄家不需要亮自己的牌，如果闲家未爆点，则需要和庄家比牌，和庄家点数相等或小于庄家点数，则闲家输。庄家比牌时不需要亮牌，但是当庄家比牌时爆牌，则庄家输。<br>
                        在开牌阶段，庄家输了需要自觉主动换庄，若庄家胜则点击开始新一轮<br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</body>
</html>